import {
    reduxifyNavigator,
} from 'react-navigation-redux-helpers';
import {
    createStackNavigator,
} from 'react-navigation';
import {
    connect,
} from 'react-redux';
import { StoreState } from '../redux/reducer';

import TestPage from '../rn_pages/test';
import Test2 from '../rn_pages/test2';

export const AppRouteConfig = {
    Home: { screen: TestPage },
    Test2: { screen: Test2 },
};

const stackConfig: any = {
    mode: 'card',
    headerMode: 'none',
    gesturesEnabled: false,
    // gestureResponseDistance: { horizontal: 10 },
    transitionConfig: () => ({
        screenInterpolator: (sceneProps: any) => {
            const { layout, position, scene } = sceneProps;
            const { index, route } = scene;
            const translateX = position.interpolate({
                inputRange: [index - 1, index, index + 1],
                outputRange: [layout.initWidth, 0, 0],
            });
            const opacity = position.interpolate({
                inputRange: [index - 1, index - 0.99, index, index + 0.99, index + 1],
                outputRange: [0, 0.3, 1, 0.3, 0],
            });
            if (route) {
                //TODO:alert开头的其他操作
                // if (
                //     (route.routeName == RoomRoute)
                //     // || (route.routeName == 房间主页)
                // ) {
                //     return { opacity };
                // }
            }
            return { opacity, transform: [{ translateX }] };
        },
    }),
};

export const AppStack = createStackNavigator(AppRouteConfig, stackConfig);

export function getAppStackComponent(): any {
    return connect((state: StoreState) => ({ state: state.ui.nav }))(reduxifyNavigator(AppStack, 'root') as any);
}